import * as React from 'react';
import { lazy, Suspense } from 'react';

import HomePage from './pages/home';

const LazyAboutPage = lazy(() => import('./pages/about')); // TODO: 似乎没啥用
const LazyAboutCompsPage = lazy(() => import('./pages/about/comps')); // TODO: 似乎没啥用
const LazyLoginPage = lazy(() => import('./pages/user/login')); // TODO: 似乎没啥用
const LazyPostPage = lazy(() => import('./pages/post'));
const LazyPostEditorPage = lazy(() => import('./pages/post/editor'));
const LazyWorkSpacePage = lazy(() => import('./pages/workspace'));

const routes = [
  {
    path: '/about/comps',
    page: () => (
      <Suspense fallback="加载中">
        <LazyAboutCompsPage />
      </Suspense>
    ),
  },
  {
    path: '/about',
    page: () => (
      <Suspense fallback="加载中">
        <LazyAboutPage />
      </Suspense>
    ),
  },
  {
    path: '/p/:postId',
    page: () => (
      <Suspense fallback="加载中">
        <LazyPostPage />
      </Suspense>
    ),
  },
  {
    path: '/post/new',
    page: () => (
      <Suspense fallback="加载中">
        <LazyPostEditorPage />
      </Suspense>
    ),
  },
  {
    path: '/post/edit/:postId',
    page: () => (
      <Suspense fallback="加载中">
        <LazyPostEditorPage />
      </Suspense>
    ),
  },
  { path: '/users', page: () => <Users /> },
  {
    path: '/user/login',
    page: () => (
      <Suspense fallback="加载中">
        <LazyLoginPage />
      </Suspense>
    ),
  },
  {
    path: '/workspace',
    page: () => (
      <Suspense fallback="加载中">
        <LazyWorkSpacePage />
      </Suspense>
    ),
  },
  { path: '/', page: () => <HomePage /> },
];

export default routes;

function Users() {
  return <h2>Users</h2>;
}
